import React, { Component } from 'react'
import './Vie.css'
import { Select, } from 'antd';
import type { DatePickerProps } from 'antd';
import { DatePicker, Space, TimePicker, Input, Checkbox } from 'antd';
import dayjs from 'dayjs'
import type { CheckboxChangeEvent } from 'antd/es/checkbox';
import service from '../../../utils/service';
const { Option } = Select;
export default class Edi extends Component<any, any> {
    constructor(props: any) {
        super(props)
        this.state = {
            xyear: '',
            xterm: '',
            agins: '',
            jsxq: '',
            starttims: '',
            overtims: '',
            locas: '',
            ranges: ''
        }
    }
    // 取消返回
    qx = () => {
        this.props.history.push('/Main/Leave/Work')
    }
    // 确定发请求并返回
    qd = () => {
        if (this.state.agins == '' || this.state.jsxq == '' || this.state.starttims == '' || this.state.overtims == '' || this.state.ranges == '' || this.state.locas == '') {
            alert('请输入完整内容')
        } else {
            this.props.history.push('/Main/Leave/Work')
            service({
                url: `/attendance/${this.props.location.query.record.id}`,
                method: 'patch',
                data: {
                    agin: this.state.agins,
                    over: this.state.jsxq,
                    starttim: this.state.starttims,
                    overtim: this.state.overtims,
                    loca: this.state.ranges,
                    range: this.state.locas,
                }
            })
            
        }

    }
    // 打卡范围双向绑定
    punch = (e:any) => {
        this.setState({
            ranges:e.target.value
        })
    }
    // 路由跳转返回
    rn = () => {
        this.props.history.push('/Main/Leave/Work')
    }
    render() {
        return (
            <div>
                <h1>编辑</h1>
                <div className='vie'>
                    <div className='xn'>
                        <div>
                            考勤学年：
                            <Select allowClear placeholder='考勤学年' className='kqxn' onSelect={(value) => { this.setState({ xyear: value }) }} value={this.props.location.query.record.year}>
                                {/* <Option value="双屏">双屏</Option> */}
                            </Select>
                        </div>
                        <div className='xn1'>
                            考勤学期：
                            <Select allowClear placeholder='考勤学期' className='kqxn' onSelect={(value) => { this.setState({ xterm: value }) }} value={this.props.location.query.record.term}>
                                <Option value="上学期">上学期</Option>
                                <Option value="下学期">下学期</Option>
                            </Select>
                        </div>
                    </div>
                    <div className='xq'>
                        <div>
                            学期开始：
                            <Space direction="vertical" >
                                <DatePicker className='kqxn' onChange={(date, dateString) => { this.setState({ agins: dateString }) }} />
                            </Space>
                        </div>
                        <div className='xn1'>
                            学期结束：
                            <Space direction="vertical">
                                <DatePicker className='kqxn' onChange={(date, dateString) => { this.setState({ jsxq: dateString }) }} />
                            </Space>
                        </div>
                    </div>
                    <div className='kq'>
                        <div>
                            考勤开始：
                            <TimePicker className='kqxn' format='HH:mm' onChange={(time, timeString) => { this.setState({ starttims: timeString }) }} />
                        </div>
                        <div className='xn1'>
                            考勤结束：
                            <TimePicker className='kqxn' format='HH:mm' onChange={(time, timeString) => { this.setState({ overtims: timeString }) }} />
                        </div>
                    </div>
                    <div className='dk'>
                        <div>
                            打卡地点：
                            <Select allowClear placeholder='打卡地点' className='kqxn' onSelect={(value) => { this.setState({ locas: value }) }}>
                                <Option value="西安千锋校区">西安千锋校区</Option>
                                <Option value="北京大学">北京大学</Option>
                                <Option value="清华大学">清华大学</Option>
                            </Select>
                        </div>
                        <div className='xn1'>
                            打卡范围：
                            <input className='dkfw' placeholder='' onChange={this.punch}></input>
                        </div>
                    </div>
                    <div className='bc'>
                        考勤班次：
                        <Checkbox >周一</Checkbox>
                        <Checkbox >周二</Checkbox>
                        <Checkbox >周三</Checkbox>
                        <Checkbox >周四</Checkbox>
                        <Checkbox>周五</Checkbox>
                        <Checkbox>周六</Checkbox>
                        <Checkbox>周天</Checkbox>
                    </div>
                    <div className='pc'>
                        排除节假日：
                        <Checkbox checked={true}></Checkbox>
                    </div>
                    <div>
                        <button className='fh' onClick={this.qd} >确定</button>
                        <button className='fh' onClick={this.qx} >取消</button>
                    </div>
                </div>
            </div>
        )
    }
}
